<!-- 检票员端 上下学后小视频 -->
<template>
  <div class="container">
    <m-header :closeFn="() => this.$router.push({ name: 'cpersonal', })">{{ name }}</m-header>
    <div class="main">
      <div class="content-wrap">
        <div class="detl-wrap">
          <template v-if="detlData.shuttle_name">
            <div class="field-wrap" v-for="(item, i) in fieldList" :key="i">
              <div class="label">{{ item.label }}</div>
              <div class="val" v-if="item.type === 'text'">{{ detlData[item.key] }}</div>
              <div class="val" v-else-if="item.type === 'img'">
                <img :src="detlData[item.key]" alt="" class="img">
              </div>
              <div class="val" v-else-if="item.type === 'upload'">
                <van-uploader
                  v-model="picList"
                  preview-size="72"
                  :multiple="picLimit > 1"
                  :max-count="picLimit"
                  capture="camcorder"
                  accept="video/*"
                />
              </div>
            </div>
            <van-button class="btn" color="#2882FE" @click="onSave">提交</van-button>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast, Uploader, Empty, } from 'vant'
import form from '@/components/form/form'
import select from '@/components/select/select'
import { uploadFile, } from '@/request/api'

const http = process.env.NODE_ENV === 'development' ? process.env.VUE_APP_PATH : window.webConfig.webApiBasePath

export default {
  name: '',
  components: {
    'm-form': form,
    'm-select': select,
    [Uploader.name]: Uploader,
  },
  computed: {
    
  },
  data() {
    return {
      fieldList: [
      { key: 'shuttle_name', label: '班车名称', type: 'text', disabled: true, },
        { key: 'packag_type_name', label: '套票类型', type: 'text', disabled: true, },
        { key: 'ticket_typall_name', label: '票种', type: 'text', disabled: true, },
        { key: 'carNumber', label: '车牌号码', type: 'text', disabled: true, },
        { key: '', label: '拍视频', type: 'upload', disabled: true, },
      ],
      detlData: {
        shuttle_name: '智城1号',
        packag_type_name: '往返套票',
        ticket_typall_name: '月票',
        carNumber: '粤E14785',
      },

      picList: [],
      picLimit: 1,
      name: '',

    }
  },
  watch: {
    picList(newVal, oldVal) {
      
    },
  },
  created() {
    let videoTitle = localStorage.getItem('videoTitle')
    if(videoTitle.indexOf('小视频') === -1) videoTitle = '上车后小视频'
    this.name = videoTitle
  },
  methods: {
    // 选择文件前
    beforeRead(file) {
      console.log('读取文件前', file);

      return new Promise(resolve => {
        // 文件超出500k压缩
        if(file.size < 512000) resolve(file)
        else imgCompress(file).then(f => resolve(f))
      })
    },
    // 选择图片后操作
    afterRead(e){
      console.log('选择文件后：', e)
      let formData = new FormData()
      formData.append('file', e.file)
      uploadFile(formData).then(res => {
        if(res.errcode !== 0) return
        let { shortName, url, } = res.row[0],
            obj = {
              name: shortName,
              url: http + url,
              id: url,
            }
        if(this.picLimit === 1) {
          this.picList = [obj]
        } else {
          this.picList = [ ...this.picList, obj, ]
        }
      })
    },
    // 删除图片
    deleteFile(e) {
      let index = this.picList.findIndex(item => item.url === e.url)
      this.picList.splice(index, 1)
    },

    onSave() {
      console.log('点击了提交');
      Toast('提交成功')
    },

    // 假数据
    getDetlData() {
      // if(!this.scanRes) return
      // Toast.loading({
      //   duration: 0,
      //   forbidClick: true,
      // })
      // let timer = setTimeout(() => {
      //   Toast.clear()
      //   clearTimeout(timer)

      //   this.detlData = {
      //     shuttle_name: '智城1号',
      //     packag_type_name: '往返套票',
      //     ticket_typall_name: '月票',
      //     seat_no: '4',
      //     seat_no_leave: '4',
      //     passengers_name: '王小明',
      //     pictures_link: 'http://yfgpwebapi.fszyrj.com/SchoolBus/UploadFiles/00443585-09f0-4377-9c5b-669154d800e3_MVIMG_20230607_094800.jpg',
      //     checkRes: '通过',
      //   }
      // }, 500)
    },
  },
}
</script>

<style scoped lang="less">
.container {
  width: 100%;
  height: calc(100% - 50px);
  box-sizing: border-box;
  overflow: auto;

  >.main {
    height: unset;
  }
}

.container {
  height: 100vh;

  >.head {
    margin-bottom: 20px;

    >.scan-wrap {
      display: flex;
      align-items: center;
      height: 46px;
      padding: 5px 10px;
      border-radius: 8px;
      color: #1989fa;
      background: #fff;

      >.opt-wrap {
        display: flex;
        align-items: center;
        margin-right: 10px;
        padding-right: 10px;
        border-right: 2px dashed #e0e0e0;

        >.text {
          width: 3em;
          margin-right: 4px;
          font-size: 14px;
        }
      }

      >.ipt-wrap {
        flex: 1;
        display: flex;
        height: 100%;

        >.ipt {
          flex: 1;
          width: 0;
          height: 100%;
          font-size: 20px;
          font-weight: bold;
          line-height: 0;

          &::placeholder {
            color: #cccccc;
          }
        }
      }

      >.scan-btn {
        // flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        
        &::before {
          content: '';
          height: 33px;
          border-left: 2px dashed #e0e0e0;
        }

        >.iconfont {
          margin-left: 10px;
          font-size: 20px;
        }
      }
    }

  }

  >.main {
    padding: 15px;
    font-size: 14px;

    >.content-wrap {

      >.title-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;

        >.btn {
          color: #808080;
        }
      }

      >.detl-wrap {
        padding: 15px;
        border-radius: 8px;
        font-size: 15px;
        background: #fff;

        >.field-wrap {
          display: flex;
          margin-bottom: 15px;

          >.label {
            min-width: 6.5em;
            color: #808080;
          }

          >.val {
            flex: 1;

            >.img {
              width: 100%;
            }

            &.val-select {
              display: flex;
              align-items: center;

              >.text {
                flex: 1;
              }
            }
          }
        }

        >.btn {
          width: 100%;
          height: 37px;
          border-radius: 4px;
        }
      }
    }
  }

}
</style>